<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .top{
            border-color: rgb(251,251,251);
            height: 45px;
            margin: 10px;
            /*padding: 10px;*/
        }
        .top ul {
            list-style-type: none;
            overflow: hidden;
            background-color: #f3f3f3;
            height: 40px;
        }

        .top li {
            float: left;
        }

        .top li a {
            display: block;
            color: #666;
            text-align: center;
            line-height: 45px;
            padding-left: 20px;
            padding-right: 20px;
            font-size: 16px;
            text-decoration: none;
        }

        .top li a:hover{
            background-color: #ddd;
            text-decoration: none;
            color: #666;
        }

        .body li{
            float: left;
        }
        .body_left{
            margin-top: 10px;
            width: 35%;
            float: left;
        }
        .body_right{
            margin-top: 10px;
            width: 60%;
            float: right;
        }
        .body_panel{
            width: 40%;
            margin-left: 30px;
            margin-right: 30px;
            float: left;
        }
    </style>
    <script>
        function home() {
            $(".body").hide();
            $(".body2").show();
            $(".left1").show();
            $(".left2").hide();
        }
        function cartoon() {
            $(".body2").hide();
            $(".body").show();
            $(".left2").show();
            $(".left1").hide();
        }
    </script>
</head>
<body style="width: 80%;margin: auto">
    <div class="top">
        <ul class="list-unstyled list-inline">
            <li><a href="#">D站</a></li>
            <li><a href="#" onclick="home()">首页</a></li>
            <li><a href="#" onclick="cartoon()">动漫</a></li>
            <li>
                <!--<div class="dropdown">-->
                <a data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                其他频道
                <span class="caret"></span>
                </a>
                <!--<ul>-->
                    <!--11111-->
                <!--</ul>-->
                <!--</div>-->
            </li>

            <!--<div class="btn-group" style="float: left">-->
              <!--<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
                <!--Action <span class="caret"></span>-->
              <!--</button>-->
              <!--<ul class="dropdown-menu">-->
                <!--<li><a href="#">Action</a></li>-->
                <!--<li><a href="#">Another action</a></li>-->
                <!--<li><a href="#">Something else here</a></li>-->
                <!--<li role="separator" class="divider"></li>-->
                <!--<li><a href="#">Separated link</a></li>-->
              <!--</ul>-->
            <!--</div>-->


            <!--<li><a href="#">搜索框</a></li>-->
            <li><input style="margin-top: 3px" type="text" class="form-control" placeholder="Jane Doe"></li>

            <!--<li><a href="#" class="btn btn-default active" role="button">搜索</a></li>-->
            <li><button style="margin-top: 3px" class="btn btn-default" type="submit">搜索</button></li>

            <li style="float: right"><a href="#">个人中心&nbsp;<span class="caret"></span></a></li>
            <li style="float: right"><a href="#">注册</a></li>
        </ul>
    </div>

    <div class="body" style="display: none">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin: auto;display: block">
            <!-- Indicators -->
            <ol class="carousel-indicators " style="margin: auto;">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox" >
                <div class="item active" style="background-color: white">
                  <img style="display: block;margin: auto" src="1.svg" alt="">
                  <div class="carousel-caption text-center">
                    First
                  </div>
                </div>
                <div class="item">
                  <img style="display: block;margin: auto" src="1.svg" alt="">
                  <div class="carousel-caption">
                    Second
                  </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" >
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <div class="body2" >
        <div class="jumbotron" >
            <div class="container">
                 <h1>Hello, world!</h1>
                  <p>...</p>
                  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
            </div>
        </div>
    </div>

    <div style="display: block;width: 100%;height: 40px;padding: 10px;background-color: rgb(245,245,245);margin-top: 20px">
        <a href="#" style="margin-right: 10px;margin-left:10px;text-decoration: none;color: #0066FF;">Home</a>/
        <a href="#" style="margin-right: 10px;margin-left:10px;text-decoration: none;color: #0066FF;">Library</a>/
        <a href="#" style="margin-right: 10px;margin-left:10px;text-decoration: none;color: #666;">Data</a>
    </div>

    <div class="body_left">
        <div class="left1" >
            <div class="list-group">
                <button type="button" class="list-group-item">
                    <span class="badge">14</span>
                    Cras justo odio
                </button>
                <button type="button" class="list-group-item">
                    <span class="badge">14</span>
                    Cras justo odio
                </button>
                <button type="button" class="list-group-item">
                    <span class="badge">14</span>
                    Cras justo odio
                </button>
                <button type="button" class="list-group-item">
                    <span class="badge">14</span>
                    Cras justo odio
                </button>
                <button type="button" class="list-group-item">
                    <span class="badge">14</span>
                    Cras justo odio
                </button>
                <button type="button" class="list-group-item">
                    <span class="badge">14</span>
                    Cras justo odio
                </button>
                <button type="button" class="list-group-item">
                    <span class="badge">14</span>
                    Cras justo odio
                </button>
            </div>
        </div >
        <div class="left2" style="display: none" >
            <a style="width: 100%" class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                Collapsible Group ltem#1
            </a>
            <div class="collapse" id="collapseExample" style="display: block;">
                <div class="well" style="background-color: white;border-color: rgb(51,122,183);margin-bottom: 0px">
                Anim pariatur cliche reprehenderit, enim eusmod high ite accusamus terry richardson ad squid 3 wolf moon officia aute. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum elusmod. Brunch 3 wolf moon tempor. sunt aliqua put a bird on it squld single-origin coffee nula assumenda shoreaitch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vike lomo. Leggings occaecat craft beer arm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS
                </div>
            </div>

            <a style="width: 100%" class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
                Collapsible Group ltem#2
            </a>
            <div class="collapse" id="collapseExample2">
                <div class="well" style="background-color: white;border-color: rgb(51,122,183);margin-bottom: 0px">
                    222222222222222222222222222222222222222Anim pariatur cliche reprehenderit, enim eusmod high ite accusamus terry richardson ad squid 3 wolf moon officia aute. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum elusmod. Brunch 3 wolf moon tempor. sunt aliqua put a bird on it squld single-origin coffee nula assumenda shoreaitch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vike lomo. Leggings occaecat craft beer arm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS
                </div>
            </div>

            <a style="width: 100%" class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
                Collapsible Group ltem#3
            </a>
            <div class="collapse" id="collapseExample3">
                <div class="well" style="background-color: white;border-color: rgb(51,122,183);margin-bottom: 0px">
                33333333333333333333333333333333333333333Anim pariatur cliche reprehenderit, enim eusmod high ite accusamus terry richardson ad squid 3 wolf moon officia aute. non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum elusmod. Brunch 3 wolf moon tempor. sunt aliqua put a bird on it squld single-origin coffee nula assumenda shoreaitch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vike lomo. Leggings occaecat craft beer arm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS
                </div>
            </div>

        </div>

    </div>

    <div class="body_right">
        <div class="row">
            <div class="panel panel-primary body_panel">
                <div class="panel-heading">
                Panel title
                </div>
                <div class="panel-body">
                ....
                </div>
            </div>

            <div class="panel panel-primary body_panel">
                <div class="panel-heading">
                Panel title
                </div>
                <div class="panel-body">
                ....
                </div>
            </div>
        </div>

        <div class="row">
            <div class="panel panel-primary body_panel">
                <div class="panel-heading">
                Panel title
                </div>
                <div class="panel-body">
                ....
                </div>
            </div>

            <div class="panel panel-primary body_panel">
                <div class="panel-heading">
                Panel title
                </div>
                <div class="panel-body">
                ....
                </div>
            </div>
        </div>

        <div class="row">
            <div class="panel panel-primary body_panel">
                <div class="panel-heading">
                Panel title
                </div>
                <div class="panel-body">
                ....
                </div>
            </div>

            <div class="panel panel-primary body_panel">
                <div class="panel-heading">
                Panel title
                </div>
                <div class="panel-body">
                ....
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>